<template>
    <div id="addCard">
        <div class="page-title">添加卡密</div>
        <el-alert
                title="注意：为了安全，单日最大可添加8000张卡密。单次最大可添加500张卡密，超过500分次添加.卡号及卡密最大长度为1024位"
                show-icon
                type="warning">
        </el-alert>
        <div class="container padder">
            <el-form :inline="true" :model="formInline" :rules="rules" ref="form" class="demo-form-inline">
                <el-form-item label="" prop="shangping_id">
                    <el-select placeholder="请选择商品" v-model="formInline.shangping_id">
                        <el-option v-for="pro in proList" :key="pro.Id" :value="pro.Id"
                                   :label="pro.shangping_mingcheng">
                            <span style="width: 100px;overflow: visible">{{pro.shangping_mingcheng.length > 12 ? pro.shangping_mingcheng.substr(0,12)+'...':pro.shangping_mingcheng }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="fenge_fangshi">
                    <el-select v-model="formInline.fenge_fangshi" placeholder="请选择分割方式">
                        <el-option v-for="(item,key) in splitType" :value="key" :label="item"
                        ></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="txtImport" :loading="importLoading">TXT导入</el-button>
                </el-form-item>
                <br>
                <el-form-item label="" prop="kami_data">
                    <el-input type="textarea" rows="15" v-model="formInline.kami_data"></el-input>
                </el-form-item>
            </el-form>
            <el-form>

            </el-form>


            <div class="m-t-lg">
                <el-button type="primary" class="m-r-md" @click="append">添加</el-button>
                <el-radio-group v-model="formInline.paichu_fangshi">
                    <el-radio :label="0">无动作</el-radio>
                    <el-radio :label="1">去除输入框里的重复卡密</el-radio>
                    <el-radio :label="2">重复的卡密不导入库存中</el-radio>
                </el-radio-group>
            </div>
            <div class="creator" @click="dialogVisible = true">
                <img src="../../assets/imgs/createCard.png" alt="">
            </div>
        </div>
        <input type="file" style="display: none" ref="file" @change="fileChange"  accept="text/plain">
        <el-dialog
                title="卡密生成工具"
                :visible.sync="dialogVisible"
                width="60%"
        >
            <iframe style="width: 100%;height: 500px;" src="http://help.agiso.com/alds/cardtools.aspx"
                    frameborder="0"></iframe>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'addCard',
        components: {},
        data() {
            return {
                checkList: [],
                formInline: {
                    kami_data: '',
                    shangping_id: '',
                    fenge_fangshi: '1',
                    paichu_fangshi: 0
                },
                rules: {
                    shangping_id: [{required: true, message: '请选择要添加的商品'}],
                    fenge_fangshi: [{required: true, message: '请选择分割方式'}],
                    kami_data: [{required: true, message: '请输入或导入卡密信息'}],
                },
                proList: [],
                splitType: {
                    1: '用空格区分卡号卡密',
                    2: '用,区分卡号卡密',
                    3: '用-区分卡号卡密',
                    4: '用|区分卡号卡密',
                    0:'不区分卡号卡密'
                },
                dialogVisible: false,
                importLoading:false
            }
        },
        computed: {},
        methods: {
            txtImport(e) {
                this.$refs.file.click();
            },
            fileChange(e){
                let file = (e.target.files[0]);
                let reader = new FileReader();
                this.importLoading = true;
                reader.readAsText(file);
                reader.onload = (event)=>{
                    this.formInline.kami_data = event.target.result;
                    this.importLoading = false;
                }
            },
            append() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$axios.post(`/api/shanghu/kami_up`, this.formInline)
                            .then(res => {
                                if (res.code === `200`) {
                                    this.$confirm(`${res.msg}, 是否继续?`, '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'success'
                                    }).then(() => {
                                        this.formInline.kami_data = ''
                                    }).catch(() => {
                                        this.$router.push('stock');
                                    });

                                }
                            })
                    }
                })

            },
            //获取商品分类
            getBrand() {
                return new Promise(resolve => {
                    this.$axios.post(`/api/shanghu/kami_up_get`)
                        .then(res => {
                            resolve();
                            if (res.code === `200`) {
                                this.proList = res.data.shangping_data;

                            }
                        })
                })
            },
        },
        async created() {
            this.formInline.shangping_id = +this.$route.query.id || '';
            this.getBrand();
        },
    }
</script>

<style lang="less" scoped>
    .container {
        width: 800px;
        position: relative;
        .m-t-lg {
            display: flex;
            align-items: center;
        }
        /deep/ .el-textarea__inner {
            width: 800px;
        }
        .creator {
            position: absolute;
            right: -120px;
            bottom: 100px;
            width: 100px;
            img {
                width: 100%;
            }
        }
    }
</style>
